<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<style>
			.tv_search_input {
				width: 330px;
				height: 30px;
				border: solid 1px orange;
				border-radius: 5px;
				margin-top: 20px;
				padding-left: 5px;
				float: left;
			}

			.tv_search_a {
				width: 70px;
				height: 30px;
				background-color: orange;
				float: left;
				margin-top: 20px;
				color: white;
				text-align: center;
				line-height: 30px;
				border-radius: 5px;
			}
			.foot{background-color: orange;
				text-align: center;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div>
					<img src="img/top_banner.jpg" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<img src="img/qian_logo.png" />
				</div>
				<div class="col-md-5">
					<input class="tv_search_input" type="text" placeholder="请输入线路">
					<a href="#" class="tv_search_a">搜索</a>
				</div>
				<div class="col-md-4">
					<img src="img/hotel_tel.png">
				</div>
			</div>
			<div class="row">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1" ariaexpanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar">
								</span>
								<span class="icon-bar">
								</span>
								<span class="icon-bar">
								</span>
							</button>
							<a class="navbar-brand" href="#">阳朔</a>
						</div>
						<div class="collapsed navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="active"><a href="#">百色 <span class="sronly">(current)</span></a></li>
								<li><a href="#">崇左</a></li>
								<li><a href="#">柳州</a></li>
								<li><a href="#">清远</a></li>
								<li><a href="#">南澳</a></li>
								<li><a href="#">茂名</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="container-fluid">
			<!-- 定义行 -->
			<div class="row">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slideto="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slideto="1"></li>
						<li data-target="#carousel-example-generic" data-slideto="2"></li>
					</ol>
					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="img/banner_1.jpg" alt="..." style="width:100%;">
							<div class="carousel-caption">...</div>
						</div>
						<div class="item">
							<img src="img/banner_2.jpg" alt="..." style="width:100%;">
							<div class="carousel-caption">
								...
							</div>
						</div>
						<div class="item">
							<img src="img/banner_3.jpg" alt="..." style="width:100%;">
							<div class="carousel-caption">
								...
							</div>
						</div>
					</div>
					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span></a>
				</div>
			</div>
		</div>
		<!-- 千锋精选 -->
		<div class="container">
			<div class="row inner">
				<img src="img/icon_5.jpg" />
				<span>千锋精选</span>
				</div>
			<div class="row" style="margin-top: 5px;">
				<div class="thumbnail col-md-3">
					<img src="img/jingxuan_2.jpg" />
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span>399</span>
				</div>
				<div class="thumbnail col-md-3">
					<img src="img/jiangxuan_3.jpg" />
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span>699</span>
				</div>
				<div class="thumbnail col-md-3">
					<img src="img/jiangxuan_4.jpg" />
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span>1999</span>
				</div>
				<div class="thumbnail col-md-3">
					<img src="img/jiangxuan_5.jpg" />
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span>4999</span>
				</div>
			</div>
		</div>
		<!-- 中间部分 -->
		<div class="container">
			<div class="row inner">
				<img src="img/icon_6.jpg">
				<span>国内游</span>
			</div>
			<div class="row">
				<div class="col-md-4">
					<img  src="img/guonei_1.jpg"/>
				</div>
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-4 thumbnail">
							<img src="img/jiangxuan_1.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
						<div class="col-md-4 thumbnail">
							<img src="img/jiangxuan_2.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
						<div class="col-md-4 thumbnail">
							<img src="img/jiangxuan_3.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
						</div>
						<div class="row">
							<div class="col-md-4 thumbnail">
							<img src="img/jiangxuan_4.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
						<div class="col-md-4 thumbnail">
							<img src="img/jiangxuan_5.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
						<div class="col-md-4 thumbnail">
							<img src="img/jingxuan_2.jpg">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span>540</span>
						</div> 
					</div>
				</div>
			</div>
		</div>
		<!-- 尾部 -->
		<div class="container">
			<div class="row">
				<img src="img/footer_service.png" width="100%"/>
			</div>
			<div class="row foot">
				千锋教育 运营主体：北京千锋互联科技有限公司 ，属具备计算机技术培训资质的教育培训机构
			</div>
		</div>
	</body>
</html>